<template>
	<view class="root-container root-page-top">
		<uv-navbar placeholder title="身份选择" imgMode="widthFix" @leftClick="goBack" bgColor="transparent" />
		<view class="select-prompt">选择您的身份</view>

		<view class="identity-options">
			<view v-for="option in options" :key="option.id" class="option-card" @click="selectOption(option.id)">
				<view class="option-content">
					<view class="option-icon">
						<image :src="option.image"  />
					</view>
					<view class="option-label">{{ option.name }}</view>
				</view>
				<!-- <view class="option-selector">
					<view class="selector-circle" :class="{ 'selected': selectedOption === option.id }"></view>
				</view> -->
			</view>
		</view>
		
		<uv-popup ref="uvPopupTip" round="10" :closeOnClickOverlay="false" :closeable="true" closeIconPos="top-right">
			<view class="tip-box">
				<tui-icon name="clock-fill" color="#1E90FF" size="100"></tui-icon>
				<view class="fz38 fzW mt-20">申请审核中</view>
				<view class="fz24 cdark mt-20">我们将于7个工作日内核查申请请留意当前页面变动</view>
				<view class="fz24 cgray mt-30">申请通过，可直接进入身份页面</view>
				
			</view>
		</uv-popup>
		
		
		
	</view>
</template>



<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	
	import {
		getUserIdentity
	} from '@/api'
	
	import {
		useUserStore
	} from '@/store'
	
	import {
		storeToRefs
	} from "pinia"
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app'
	
	import { useCustomBack } from '@/components/useCustomBack.js'
    const { goBack } = useCustomBack('/pages/user/index')
	
	const user = useUserStore()
	const {
		token,
		userInfo
	} = storeToRefs(user)
	
	
	
	const options = ref([])
	const uvPopupTip=ref(null)
	const selectedOption = ref('')
	
	const selectOption = (value) => {
		selectedOption.value = value
		let arr = options.value;
		if (value == 1) {
			if(arr[0].is_identity==0 || arr[0].is_identity==3){
				uni.navigateTo({
					url: '/pages-agent/join/agent'
				})
			}else if(arr[0].is_identity==1){
				showPopup()
			}else if(arr[0].is_identity==2){
				uni.navigateTo({
					url: '/pages-user/distributor/index'
				})
			}
		} else if (value == 2) {
			if(arr[1].is_identity==0 || arr[1].is_identity==3){
				uni.navigateTo({
					url: '/pages-home/join/skill'
				})
			}else if(arr[1].is_identity==1){
				showPopup()
			}else if(arr[1].is_identity==2){
				uni.navigateTo({
					url: '/pages-skilled/index'
				})
			}
		} else if (value == 3) {
			if(arr[2].is_identity==0 || arr[2].is_identity==3){
				uni.navigateTo({
					url: '/pages-home/join/worker'
				})
			}else if(arr[2].is_identity==1){
				showPopup()
			}else if(arr[2].is_identity==2){
				uni.navigateTo({
					url: '/pages-neighbor/neighbor'
				})
			}
			
			
		} else if (value == 4) {
			
			if(arr[3].is_identity==0 || arr[3].is_identity==3){
				uni.navigateTo({
					url: '/pages-manager/join/manager'
				})
			}else if(arr[3].is_identity==1){
				showPopup()
			}else if(arr[3].is_identity==2){
				uni.navigateTo({
					url: '/pages-manager/my/my'
				})
			}
			
			
		} else if (value == 5) {
			if(arr[4].is_identity==0 || arr[4].is_identity==3){
				uni.navigateTo({
					url: '/pages-home/join/merchant'
				})
			}else if(arr[4].is_identity==1){
				showPopup()
			}else if(arr[4].is_identity==2){
				uni.navigateTo({
					url: '/pages-merchant/merchantMine'
				})
			}
		}
		
		else if (value == 6) {
			if(arr[5].is_identity==0 || arr[5].is_identity==3){
				uni.navigateTo({
					url: '/pages-home/join/community'
				})
			}else if(arr[5].is_identity==1){
				showPopup()
			}else if(arr[5].is_identity==2){
				uni.navigateTo({
					url: '/pages-community/munityMine'
				})
			}
		}
		
	}
	
	const showPopup=()=>{
		uvPopupTip.value?.open('center')
	}
	const init = async () => {
		const {
			result
		} = await getUserIdentity()
		let icon = [
			'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0813/d9a9d202508130916414172.png', 
			'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0813/43515202508130917224596.png', 
			'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0813/4d3cb202508130917514332.png', 
			'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0813/ceb06202508130918481192.png', 
			'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0813/166a920250813091928532.png',
			'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0902/e8d6d202509021342331700.png'
			];
		options.value = result.map((item, index) => ({
			id: item.id,
			name: item.name,
			is_identity: item.is_identity,
			image:item.image,
			icon: icon[index]
		}))
	}
	onLoad((option) => {
		//init()
	})
	
	onShow(()=>{
		init()
	})

	
</script>

<style lang="scss" scoped>

	
	
	.identity-select-container {
		width: 100%;
		background-color: #f5f5f5;
	}

	.select-prompt {
		color: #000;
		font-size: 32upx;
		font-weight: 600;
		height: 96upx;
		line-height: 96upx;
		padding-left: 20upx;
	}

	.identity-options {
		max-width: 750upx;
		padding: 0 20upx;
		margin: 0 auto;
	}

	.option-card {
		border-radius: 20upx;
		padding: 20upx;
		margin-bottom: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 8upx 16upx rgba(0, 0, 0, 0.1);
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.option-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 12upx 24upx rgba(0, 0, 0, 0.15);
	}

	.option-content {
		display: flex;
		align-items: center;
	}

	.option-icon image {
		width: 80upx;
		height: 80upx;
		margin-right: 30upx;
	}

	.option-label {
		font-size: 32upx;
		color: #333;
	}

	.option-selector {
		width: 48upx;
		height: 48upx;
		border: 4upx solid #ccc;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.selector-circle {
		width: 32upx;
		height: 32upx;
		border-radius: 50%;
		background: transparent;
		transition: background 0.3s ease;
	}

	.selector-circle.selected {
		background: #4A90E2;
	}
	
	
	.tip-box{
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
		padding: 40upx 80upx 40upx 80upx;
		box-sizing: border-box;
		width:500upx;
		text-align: center;
	}
</style>